<template>
  <el-scrollbar height="790px">
    <el-col :span="24">
      <el-card :body-style="{ padding: '0px' }">
        <div @click="fh" class="fh">
          <el-icon><ArrowLeftBold /></el-icon> <span>返回</span>
        </div>
        <div style="min-height: 700px">
          <img :src="newsinfo.cover" class="image" />
          <div style="padding: 14px">
            <h2 style="display: flex; justify-content: center; color: red">
              {{ newsinfo.title }}
            </h2>
            <div class="bottom">
              <time class="time">{{ newsinfo.contenthtml }}</time>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia"
import { useNewsStore } from "@/stores/newsinfo"
import { ArrowLeftBold } from "@element-plus/icons-vue"
const { newsinfo } = storeToRefs(useNewsStore())
const router = useRouter()
const fh = () => {
  router.push("/newslist")
}
const init = () => {
  if (JSON.stringify(newsinfo.value) === "{}") {
    router.replace("/newslist")
  }
}
init()
</script>

<style lang="scss" scoped>
.time {
  font-size: 14px;
  color: black;
  letter-spacing: 1px;
  line-height: 20px;
}
.fh {
  margin: 10px;
  display: flex;
  align-items: center;
  &:hover {
    cursor: pointer;
    color: #409eff;
  }
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 400px;
  display: flex;
  justify-content: center;
  margin: 20px auto;
}
</style>
